<template>
  <div>
    <div class="banner">
      <div class="w-1200-container h-full flex justify-center align-middle items-center">
        <div
          class="
            text-5xl
            h-full
            text-white
            font-bold
            flex
            items-center
            justify-center
          "
        >
          独角兽/瞪羚企业自评测
        </div>
        <el-image
          class="pt-8 ml-40"
          style="width: 18.9375rem; height: auto"
          fit="contain"
          :src="bannerImg"
        >
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>
      </div>
    </div>

    <div
      class="
        w-1200-container
        p-16
        border-t-2 border-solid border-blue-600
        shadow-lg
      "
      style="width: calc(100% - 4px); margin: 0 auto; margin-bottom: 10rem"
    >
      <div class="">
        <div class="text-3xl font-bold">申报所在地</div>
        <div class="pl-16 pt-10">
          <el-radio
            v-model="radio"
            :label="item.dictValue"
            border
            class="mb-6"
            v-for="(item, index) in locationList"
            :key="'radio' + index"
            @change="changeRadio"
            >{{ item.dictLabel }}
          </el-radio>
        </div>
      </div>
      <div class="mt-28">
        <div class="text-3xl font-bold">申报类型</div>
        <div class="pl-16 pt-10">
          <el-radio
            v-model="radio2"
            :label="item.dictValue"
            border
            class="mb-6"
            v-for="(item, index) in typeList"
            :key="'radio2' + index"
            @change="changeRadio"
            >{{ item.dictLabel }}
          </el-radio>
        </div>
      </div>

      <div class="mt-28 flex items-center justify-center">
        <el-button class="sub-btn" @click="linkTo">开始测试</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selectionPage",
  data() {
    return {
      bannerImg: require("@/assets/images/exam/selectionPageBanner.png"),
      radio: 0,
      radio2: 0,

      // 所在地
      locationList: [
        {
          dictLabel: "南昌市",
          dictValue: 1,
        },
        {
          dictLabel: "景德镇市",
          dictValue: 2,
        },
        {
          dictLabel: "萍乡市",
          dictValue: 3,
        },
        {
          dictLabel: "九江市",
          dictValue: 4,
        },
        {
          dictLabel: "新余市",
          dictValue: 5,
        },
        {
          dictLabel: "鹰潭市",
          dictValue: 6,
        },
        {
          dictLabel: "赣州市",
          dictValue: 7,
        },
        {
          dictLabel: "吉安市",
          dictValue: 8,
        },
        {
          dictLabel: "宜春市",
          dictValue: 9,
        },
        {
          dictLabel: "抚州市",
          dictValue: 10,
        },
        {
          dictLabel: "上饶市",
          dictValue: 11,
        },
      ],
      // 申报类型
      typeList: [
        {
          dictLabel: "瞪羚企业",
          dictValue: 1,
        },
        {
          dictLabel: "独角兽企业",
          dictValue: 2,
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    changeRadio(val) {
      // console.log(val)
    },

    // 根据申报类型跳转到指定页面
    linkTo() {
      if (!this.radio) {
        this.$message.error("请选择申报所在地");
        return;
      }
      if (!this.radio2) {
        this.$message.error("请选择申报类型");
        return;
      }

      let path = "";
      if (this.radio2 === 1) {
        path = "/exam/gazelleEvaluation";
      } else if (this.radio2 === 2) {
        path = "/exam/unicornEvaluation";
      }

      this.$router.push({
        path,
        params: {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 18.75rem;
  background: linear-gradient(316deg, #1e57f9 0%, #040bd2 100%);
}

// 修改本页面单选框样式
::v-deep .el-radio.is-bordered {
  width: 17.9375rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid #cecece;
  border-radius: 0.25rem;
  text-align: center;
}

::v-deep .el-radio.is-bordered:hover {
  border: 1px solid #093eea;
}

::v-deep .el-radio.is-bordered.is-checked {
  background: #f1f4ff;
  border: 1px solid #093eea;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  @apply ml-0;
}

::v-deep .el-radio__input {
  display: none;
}

.sub-btn {
  width: 15.6875rem;
  height: 3rem;
  color: #093eea;
  background: transparent;
  border: 1px solid #093eea;
  border-radius: 1.5625rem;

  &:hover {
    background: #5978df;
    color: #fff;
  }
}
</style>
